<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <link rel="Stylesheet" href="../../Content/Site.css" type="text/css" /> 
        <link href="~/Content/jquery-ui-1.8.17.custom.css" rel="stylesheet" type="text/css" />
        <link href="~/Content/musicPlayer.css" rel="stylesheet" type="text/css" />
        
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        
@*        <script type="text/javascript" src="~/Scripts/jquery-ui-1.8.11.min.js"></script>*@
        <script src="~/Scripts/myMusic.js" type="text/javascript"></script> 
        <script src="~/Scripts/jquery-ui-1.8.17.custom.min.js" type="text/javascript"></script>
        <script src="~/Scripts/music-player.js" type="text/javascript"></script> 
        <script src="~/Scripts/modernizr.js" type="text/javascript"></script> 
        <script src="~/Scripts/mp3Flash/niftyplayer.js" type="text/javascript"></script>
        @*<script src="~/Scripts/music-space.js" type="text/javascript"></script>*@
        <script src="http://malsup.github.com/jquery.form.js" type="text/javascript"></script> 
        <script src="~/Scripts/sammy.js" type="text/javascript"></script>

      <!--
        <link href="("~/Content/css")" rel="stylesheet" type="text/css" />
        <link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/themes/base/css")" rel="stylesheet" type="text/css" />
        <script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"></script>
        <meta name="viewport" content="width=device-width" /> -->
        <style>
	        .ui-progressbar-value { background-image: url(../../Content/pbar-ani.gif); }
	    </style>
    </head>
    <body >
         @RenderBody()
        <div id="dialog-form" title="Upload Song">
            <p class="validateTips">Choose mp3 music file.</p>
            <form id="theForm" action="/api/Music" enctype="multipart/form-data" method="post">
                <fieldset>
                    <input id="data" name="data" type="file">
                </fieldset>

                <div id="progress">
                    <div class="progress">
                    <div class="percent">0%</div>
                </div>
                <div id="status"></div>
                <div id="progressbar"></div>
                </div>
            </form>
        </div> 
 
        @*Script for handling Ajax file upload using 'JQuery Form Plugin'*@
        <script type="text/javascript">
            var bar = $('.bar');
            var percent = $('.percent');
            var status = $('#status');
            $("#progressbar").progressbar({ value: 0 });
            $(function () {
                var options = { success: function (data) {
                    //alert(data);
                },
                    beforeSend: function () {
                        //status.empty();
                        var percentVal = '0%';
                        percent.html(percentVal);
                    },
                    error: function (obj, error, msg) {
                        alert(error);
                    },
                    uploadProgress: function (event, position, total, percentComplete) {
                        //console.log(event + ", " + position + ", " + total + ", " + percentComplete);
                        var percentVal = percentComplete + '%';
                        percent.html(percentVal);
                        $("#progressbar").progressbar({
                            value: percentComplete
                        });
                    },
                    complete: function (xhr) {
                        //status.html(xhr.responseText);
                        percent.html("100%");
                        $("#progressbar").progressbar({ value: 100 });
                        setTimeout("$('#dialog-form').dialog('close')", 1500);
                        setTimeout('$("#progressbar").progressbar({ value: 0 })', 1500);
                        setTimeout('percent.html("0%")', 1500);
                        //alert("done!");
                    }
                };
                $("#theForm").ajaxForm(options);
                $('#theForm').clearForm();
            });
        </script>

        <div id="dialog-form-playlist" title="Create Playlist">
            <p class="validateTips">Enter the name of the playlist.</p>
            <form>
                <fieldset>
                    <label for="playlistName">Playlist Name</label>
                    <input id="playlistName" name="playlistName" type="text">
                </fieldset>
            </form>
        </div>
    </body>
    
</html>
